<template>
	<div id="songs">
		<div id="tab-bar">
			<span class="item" :class="{active:types==0}" @click="types =0">全部</span>
			<span class="item" :class="{active:types==7}" @click="types =7">华语</span>
			<span class="item" :class="{active:types==96}" @click="types =96">欧美</span>
			<span class="item" :class="{active:types==8}" @click="types =8">日本</span>
			<span class="item" :class="{active:types==16}" @click="types =16">韩国</span>
		</div>
		<!-- 底部table -->
		<table>
			<thead class="title">
				<th></th>
				<th></th>
				<th>音乐标题</th>
				<th>歌手</th>
				<th>专辑</th>
				<th>时长</th>
			</thead>
			<tbody class="tr">
				<tr v-for="(item,index) in listsong" :key="index">
					<td>{{index+1}}</td>
					<td>
						<!-- 封面 -->
						<div id="img">
							<img :src="item.album.picUrl">
						</div>
					</td>
					<!-- 歌名 -->
					<td>
						<div id="p">
							{{item.name}}
						</div>
					</td>
					<!-- 歌手 -->
					<td>{{item.album.artists["0"].name}}</td>
					<!-- 专辑 -->
					<td>{{item.album.name}}</td>
					<!-- 时长 -->
					<td>{{item.duration}}</td>
					<td>
						<div id="imgs" @click="clicksong(item.id)">
							<img src="../../assets/img/bf.png">
						</div>
					</td>
				</tr>
			</tbody>

		</table>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		name: 'Songs',
		data() {
			return {
				types: 0,
				//歌曲列表
				listsong: []
			}
		},
		methods: {
			//播放
			clicksong(id) {
				axios({
					url:'https://autumnfish.cn/song/url',
					method:'get',
					params:{
						id
					}
				}).then(res => {
					let url = res.data.data[0].url
					this.$parent.musicUrl = url
				})
			},
			navmeths() {
				axios({
					url: 'https://autumnfish.cn/top/song',
					method: 'get',
					params: {
						type: this.types
					}

				}).then(res => {
					this.listsong = res.data.data
					//处理时长  毫秒转换成  分秒
					for (let i = 0; i < this.listsong.length; i++) {
						//获取毫秒数
						let duration = this.listsong[i].duration
						let min = parseInt(duration / 1000 / 60)
						if (min < 10) {
							min = '0' + min
						}
						let sec = parseInt(duration / 1000 % 60)
						if (sec < 10) {
							sec = '0' + sec
						}
						this.listsong[i].duration = min + ':' + sec
					}
				})
			}
		},
		//侦听
		watch: {
			tag() {
				this.navmeths()
			}
		},
		created() {
			this.navmeths()
		}
	}
</script>

<style scoped="scoped">
	table {

		margin-top: 10px;
	}

	#img img {
		width: 80px;
		height: 80px;
	}

	#imgs img {

		width: 50px;

		height: 50px;

	}

	#tab-bar span {
		padding-left: 100px;
	}

	#tab-bar .active {
		color: red;
	}

	.title th {
		padding-left: 100px;
		padding-top: 20px;


	}

	.tr tr td {
		padding-left: 100px;
	}

	#p {
		width: 100px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: normal;
	}
</style>
